<h1>Checkbox</h1>
<h4>Default</h4>
<FluentCheckbox></FluentCheckbox>
<FluentCheckbox>label</FluentCheckbox>

<h4>Checked</h4>
<FluentCheckbox Checked="true"></FluentCheckbox>

<!-- Required -->
<h4>Required</h4>
<FluentCheckbox Required="true"></FluentCheckbox>

<h4>Indeterminate</h4>
<FluentCheckbox class="flag-indeterminate">Unchecked</FluentCheckbox>
<FluentCheckbox Checked="true" class="flag-indeterminate">Checked</FluentCheckbox>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentCheckbox Disabled="true"></FluentCheckbox>
<FluentCheckbox Disabled="true">label</FluentCheckbox>
<FluentCheckbox Disabled="true" Checked="true">Checked="true"</FluentCheckbox>
<FluentCheckbox Disabled="true" Checked="true" class="flag-indeterminate">
    Indeterminate checked
</FluentCheckbox>
<FluentCheckbox Disabled="true" class="flag-indeterminate">
    Indeterminate unchecked
</FluentCheckbox>

<h4>Inline</h4>
<FluentCheckbox Checked="true">Apples</FluentCheckbox>
<FluentCheckbox Checked="true">Bananas</FluentCheckbox>
<FluentCheckbox>Honeydew</FluentCheckbox>
<FluentCheckbox Checked="true">Oranges</FluentCheckbox>

<h4>Vertical</h4>
<fieldset style="display: flex; flex-direction: column; align-items: start;">
    <legend>Fruit</legend>
    <FluentCheckbox Checked="true">Apples</FluentCheckbox>
    <FluentCheckbox Checked="true">Bananas</FluentCheckbox>
    <FluentCheckbox>Honeydew</FluentCheckbox>
    <FluentCheckbox Checked="true">Oranges</FluentCheckbox>
</fieldset>

<h4>Visual vs audio label</h4>
<FluentCheckbox>
    <span aria-label="Audio label">Visible label</span>
</FluentCheckbox>
<!-- With label -->
